<template>
  <div class="hot">
    <div class="center">
      <div class="top">
        <div class="title">
          <span></span>
          <span>热卖推荐</span>
          <span></span>
        </div>
        <div>
          我不管这个世上的人怎么说我，我只想依照我的信念做事，绝不后悔，不管现在将来都一样。
        </div>
        <div class="bottom"></div>
      </div>
      <div class="bottom">
        <ul>
          <li v-for="(p, index) of products" :key="index">
            <router-link :to="`/about/${p.pid}`">
              <div class="pic">
                <img :src="p.pic" alt="" />
              </div>
              <div class="title">{{ p.pname }}</div>
              <p class="price">
                <span>￥{{ p.oldprice }}</span
                >￥{{ p.price }}
              </p>
            </router-link>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      products: [],
    };
  },
  mounted() {
    this.axios.get("/index/daily").then((result) => {
      this.products = result.data;
      // console.log(result.data);
      // console.log(this.products);
    });
  },
};
</script>

<style >
.hot {
  height: 1010px;
  padding: 80px 0 40px 0;
}
.center {
  width: 1200px;
  margin: 0 auto;
}
.hot .top {
  height: 110px;
  text-align: center;
}
.hot .top .title {
  position: relative;
  height: 46px;
}
.hot .top .title span {
  display: inline-block;
}
.hot .top .title span:nth-child(1) {
  position: absolute;
  top: 50%;
  left: 0;
  width: 520px;
  height: 1px;
  background-color: #efefef;
}
.hot .top .title span:nth-child(3) {
  position: absolute;
  top: 50%;
  right: 0;
  width: 520px;
  height: 1px;
  background-color: #efefef;
}
.hot .top .title span:nth-child(2) {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, 0);
  font-size: 24px;
  color: #444;
}
.hot .top div:nth-child(2) {
  font-size: 14px;
  color: #999;
}
.hot .bottom ul li {
  float: left;
  width: 290px;
  height: 425px;
  padding: 0 5px 10px;
  background-clip: content-box;
  /* background-color: #eee; */
}
.hot .bottom .pic {
  width: 290px;
  height: 362.5px;
  overflow: hidden;
}
.hot .bottom .pic img {
  width: 290px;
  transition: all linear 0.6s;
}
.hot .bottom li :hover img {
  transform: scale(1.1);
}
.hot .bottom .title {
  font-size: 14px;
  color: #666 !important;
  margin-top: 20px;
}
.hot .bottom .price {
  font-size: 12px;
  color: #565656;
  margin-top: 10px;
}
.hot .bottom .price span {
  font-size: 13px;
  color: #ccc;
  text-decoration: line-through;
}
.hot .bottom li :hover .title,
.hot .bottom li :hover .price,
.hot .bottom li :hover .price span {
  color: #d19f4f !important;
}
</style>